<template>
  <div class="email_set_box mail_quick_replay">
    <div class = "header"
         v-show = "!dealreply">
      <span v-show = "getByText" @click = "refresh"><i class="iconfont icon-zhankai1"></i> {{$t('public.getback')}}</span>
      <span @click="edit('')"><i class="el-icon-plus"></i>  {{$t('webchat.addQuickReplay')}}</span>
      <span @click = "leadIn"><i class="iconfont icon-daoru"></i>  {{$t('config.customer.import')}}</span>
      <span @click = "refresh"><i class="iconfont icon-shuaxin"></i>  {{$t('public.refresh')}}</span>
      <!--<span @click = "batchDelete" v-show="batchBtn"><i class = "iconfont icon-qiapianshangdeguanbi"></i>  批量删除</span>-->
      <el-input
        :on-icon-click = "searchText"
        class = "fr"
        @keyup.enter.native = "searchText"
        :placeholder = "$t('public.pleaseEnter')"
        icon = "search"
        v-model = "text">
      </el-input>
      <p class = "fr total"
         v-show = "!getByText">{{$t('configLazyLoad.channel.mailTip34', {total: total})}}</p>
      <div class = "pagina fr"
           v-show = "getByText">
        <pagination
          small = ""
          :currentPage = "currentPage"
          :count = "count"
          @turnPage = "turnPage"
          :totalPage = "totalPage"
        >
        </pagination>
      </div>
    </div>
    <div class="title" v-show = "dealreply">
      <bread-crumb :titleArr = "titleArr"
                   :dealEv = "true"
                   @back = "refresh"></bread-crumb>
    </div>
    <keep-alive>
      <component :is = "active"
                 :tableData="tableData"
                 :type="'email'"
                 :dealConten = "dealConten"
                 @getTagContent = "getTagContent"
                 @lindInTemSuc = "lindInTemSuc"
                 @edit = "edit"
                 @delReply = "delReply"
                 @dealReply = "dealReply"
                 @isShowDetail = "isShowDetail">
        <!--:selecRandom = 'selecRandom'-->
        <!--@multipleSelection = "multipleSelection"-->
      </component>
    </keep-alive>
  </div>
</template>
<script>
//  import Vue from 'vue'
  import replyTable from '../base/replyTable.vue'
  import leadInTemplate from '../base/leadInTemplate.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import replyTagTable from '../base/replyTagTable.vue'
  import editQuickReply from '../base/editQuickReply.vue'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'MailQuickReplay',
    data () {
      return {
        active: 'replyTable',
        tableData: [],
        titleArr: [this.$t('configLazyLoad.channel.quickReply'), this.$t('configLazyLoad.channel.editQuickReply')],
        text: '',
        total: 0,
        refreshLoading: false,
        moduleType: 'email',
        dealConten: {},
        term: {
          page: '1',
          moduleType: 'email',
          limit: 10
        },
        dealreply: false,
        getByText: false,
        count: 0,
        totalPage: 1,
        currentPage: 1,
        mailQuick: false
      }
    },
    components: {
      replyTable,
      leadInTemplate,
      replyTagTable,
      breadCrumb,
      editQuickReply,
      Pagination
    },
    computed: {
    },
    methods: {
      leadIn () {
        this.active = 'leadInTemplate'
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.channel.mailTip35'))
        this.dealreply = true
      },
      lindInTemSuc () {
        this.refresh()
      },
      dealReply (data) {
        data.moduleType = this.moduleType
        if (data._id) {
          this.$store.dispatch('updateQuickReply', data).then(res => {
            if (res.success) {
              this.$message(this.$t('configLazyLoad.channel.mailTip36'))
              this.refresh()
            }
          })
        } else {
          this.$store.dispatch('addQuickReply', data).then(res => {
            if (res.success) {
              this.$message(this.$t('configLazyLoad.channel.mailTip36'))
              this.refresh()
            }
          })
        }
      },
      delReply (obj) {
        let data = {
          _id: obj._id,
          moduleType: 'email'
        }
        this.$store.dispatch('deleteQuickReply', data).then(res => {
          this.refresh()
        })
      },
      getTagContent (id) {
        let data = deepClone(this.term)
        data.id = id
        let that = this
        that.$store.dispatch('queryQuickReplyByTitle', data).then(res => {
          that.text = ''
          that.total = res.count
          that.count = res.count
          that.tableData = deepClone(res.list)
        })
      },
      edit (obj) {
        this.active = 'editQuickReply'
        this.dealreply = true
        if (!obj) {
          this.titleArr.splice(1, 1, this.$t('configLazyLoad.channel.mailTip36'))
          this.dealConten = {}
        } else {
          this.titleArr.splice(1, 1, this.$t('configLazyLoad.channel.mailTip37'))
          let data = {
            _id: obj._id,
            moduleType: this.moduleType
          }
          this.$store.dispatch('queryQuickReplyById', data).then(res => {
            this.dealConten = deepClone(res.list[0])
          })
        }
      },
      refresh () {
        this.dealreply = false
        this.getByText = false
        this.text = ''
        this.active = 'replyTable'
        this.refreshLoading = true
        window.setTimeout(() => {
          this.refreshLoading = false
        }, 400)
        this.active = replyTable
        this.initTable()
      },
      // 获取所有快捷回复标签，渲染table
      initTable (text) {
        let data = deepClone(this.term)
        this.$store.dispatch('queryAllTitle', data).then(res => {
          this.tableData = deepClone(res.list)
          this.total = res.count
        })
      },
      turnPage (index) {
        this.currentPage = index
        this.searchText()
      },
      searchText () {
        this.getByText = true
        this.active = 'replyTagTable'
        let data = deepClone(this.term)
        data.tagsId = 'allTitle'
        data.content = this.text
        data.page = this.currentPage
        delete data.limit
        this.$store.dispatch('queryQuickReplyByContent', data).then(res => {
          this.tableData = deepClone(res.list)
          this.totalPage = Math.ceil(res.count / 10)
          this.count = res.count
        })
      },
      isShowDetail (index) {
        let tableData = this.tableData
        if (tableData[index + 1] && tableData[index + 1].content) {
          tableData.splice(index + 1, tableData[index].count)
        } else {
          this.getDetail(tableData[index]._id, tableData[index].count).then(res => {
            let detailArr = res.list
            tableData.splice(index + 1, 0, ...detailArr)
          })
        }
      },
      //      获取到选中的元素
//      multipleSelection (data) {
//        this.selectionArr = data
//        if (this.selectionArr.length > 0) {
//          this.batchBtn = true
//        } else {
//          this.batchBtn = false
//        }
//      },
//      批量删除
//      batchDelete () {
//        this.$confirm(this.$t('public.confirmDel'), this.$t('public.operate'), {
//          confirmButtonText: '确定',
//          cancelButtonText: '取消',
//          cancelButtonClass: 'primary_btn',
//          confirmButtonClass: 'primary_btn',
//          type: 'warning'
//        }).then(() => {
//          this.$message.success('批量删除成功！')
//          this.refresh()
//          this.batchBtn = false
//        })
//      },
      getDetail (id, count) {
        let data = {
          page: '1',
          limit: count,
          id: id,
          moduleType: 'email'
        }
        return this.$store.dispatch('queryQuickReplyByTitle', data)
      }
    },
    beforeMount () {
      this.initTable()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .header
    padding 3px 10px 3px 15px
    height 30px
    line-height 30px
    .total
      height 34px
      line-height 34px
      margin-right 16px
    .el-input
      width 170px
    span
      cursor pointer
      margin-right 8px
      i
        color $c-main
    .iconfont
      color $c-main
      font-size 12px
      span
        color $cf-gray2
        margin-left 6px
    .icon-zhankai1
      transform rotate(90deg)
      display inline-block
    .el-button
      padding 0
      border none
      margin-left 10px
  .title
    font-size 14px
  .icon-shuaxin
    font-size 12px
</style>
